<template>
    <div class="box">
        <header>
            <i class="bg"></i>
            <input type="text"  class="search" >
            <span>登录</span>
        </header>
        <!-- 轮播图 -->
        <div class="lbt">
            <swiper :options="swiperOption">
                <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg"><img :src="slide.src">
                </swiper-slide>
                <p class="swiper-pagination" slot="pagination"></p></swiper>
        </div>
        <!-- 京东超市 -->
        <div class="goods_list">
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png" alt="">
                <span>时令水果</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png" alt="">
                <span>新鲜蔬菜</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png" alt="">
                <span>海鲜水产</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png" alt="">
                <span>肉禽蛋品</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png" alt="">
                <span>食品干货</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png" alt="">
                <span>美妆个护</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png" alt="">
                <span>母婴百货</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png" alt="">
                <span>保健滋补</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png" alt="">
                <span>中外名酒</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png" alt="">
                <span>彩妆时尚</span>
            </div>
        </div>
        <div class="data_list">
            <ul class="box">
                <div v-for="(item) in list" :key="item.id">
                    <img :src="item.img" alt="">
                    <span :text="item.text">{{item.text}}</span>
                    <p :price="item.price">{{item.price}}</p>
                </div>
            </ul>
        </div>
        <footer>
            <ul>
                <li>
                    <router-link to="/shouye"> <img src="https://gw.alicdn.com/mt/TB1Zaa.DND1gK0jSZFKXXcJrVXa-2845-2845.png_200x200q90" alt=""></router-link>
                </li>
                <li>
                    <router-link to="/Csm"> <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png" alt=""></router-link>                          
                </li>
                <li>
                    <router-link to="/gouwu"><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png" alt=""></router-link>
                </li>
                <li>
                    <router-link to="/denglu"><img src="https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png" alt=""></router-link>
                </li>
            </ul>
        </footer>
    </div>
    
  </template>
  
  <script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    data () {  
        return {
            list:[
                {id:"1",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/7101/1/18056/165618/62f5c460E92f532a1/af94ad901110a7bc.jpg!q70.dpg.webp", text:"长虹电饭煲 多功能",price:"￥58.80"},
                {id:"2",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/85580/9/18081/111934/61387cbaE1a01b3b2/5124ced8e1468466.jpg!q70.dpg.webp", text:"乐事 “无限” 薯片 原味", price:"￥17.40"},
                {id:"3",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/156837/25/5911/101042/5fffb7d8E66479a3a/1442bc90153a8399.jpg!q70.dpg.webp", text:"休闲迷你金钱烧烤猪肉 100g", price:"￥49.00"},
                {id:"4",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/149047/6/27581/145765/634f5d4aE5c27d43b/75875707b8bf7dbe.jpg!q70.dpg.webp", text:"小胡鸭 酸辣无骨鸡爪脱骨去骨鸭掌泡椒", price:"￥45.00"},
                {id:"5",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/162425/6/22926/112832/61837274E3e5798c2/bcf27be9f836930b.jpg!q70.dpg.webp", text:"嘉顿 夹心饼干芝士味 早餐休闲零食糕点", price:"￥16.50"},
                {id:"6",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/114932/4/28729/135524/6309bb84Ec1a570df/595f8dcd5222a7e4.jpg!q70.dpg.webp", text:"味滋源乳酸菌小口袋面包300g 网红办公室休闲零食", price:"￥13.90"},
            ],
            swiperOption:{
                autoplay:true,
                pagination:{
                    el: '.swiper-pagination'
                }
            },
            swiperSlides : [{id:1,src:"https://imgcps.jd.com/ling4/10061447924567/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-60541365d250103053e030ee/afc69193/cr_1125x449_0_166/s/q70.jpg"},{id:2,src:"https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/75570/1/17836/107887/633429caE3c0375df/9caf9778d4615104.jpg!cr_1053x420_4_0!q70.jpg"},{id:3,src:"https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/94250/10/20205/134572/61db8ae7E876ca280/5be713e26eb02641.jpg!cr_1053x420_4_0!q70.jpg"},{id:4,src:"https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/66479/13/21399/65518/62e271dfE4dc4181f/2d7c014f2d37b45b.jpg!cr_1053x420_4_0!q70.jpg"},]
        }
    },
    components:{
        swiper,
        swiperSlide
    }
    
  }
  </script>
  <style lang="less" scoped>
    *{
        margin: 0;
        padding: 0 auto;
    }
    header {
        z-index: 1000;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: red;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        
        
        // .icon-gengduo {
        //     margin-left: 20px;
        //     margin-right: 20px;
        //     font-size: 0.4rem;
        //     color: #fff;
        // }
        i{
            width: 18px;
            height: 15px;
            background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
            position: relative;
            z-index: 1;
            float: left;
        }
        .search {
            font-size: 0.4rem;
            // flex: 1;
            height: 25px;
            border-radius: 0.26667rem;
            // background: #fff url() no-repeat;
            display: block;
            // background-position: 7px 9px;
            // background-size:12px 12px;
        }
        span {
            font-size: 0.34667rem;
            padding: 0 0.4rem;
            color: #fff;
        }
    }
    .lbt{
        margin-top: 40px;
        width: 100%;
        //height: 200px;
        .liimg img{
            width: 100%;
            height: 166px;
        }
    }
.goods_list {
  display: flex;
  height: 3.46667rem;
  flex-wrap: wrap;
  padding: 0.26667rem 0;
}

.goods_list .item {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.goods_list img {
  width: 0.8rem;
}

.goods_list span {
  font-size: 0.34667rem;
  padding-top: 0.13333rem;
}
.data_list{
    // margin-bottom: 100px;
    .box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
        div{
            padding-left: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
            img {
                width: 173px;
                height: 173px;
            }
            span {
                width: 170px;
                text-align: center;
                height: 100%;
                font-size: 17px;
            }
            p{
                color: red;
                font-size: 20px;
                margin-bottom: 15px;
            }
        }
    }
}
footer{
        width: 100%;
        height: 60px;
        background-color: #FFFFFF;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        box-shadow: 0 0 4px 1px #848689;
        ul {
            width: 100%;
            display: flex;
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width: 80px;
                    height: 60px;
                }
            }
            li:first-child {
                // flex: 1;
                // display: flex;
                // flex-direction: column;
                // justify-content: center;
                // align-items: center;
                img{
                    width: 40px;
                    height: 30px;
                }
            }
        }
    }

</style>